<template>
  <div class="title" :style="back">
    <div class="title-center">
      <h1>{{ name }}</h1>
      <p>{{ text }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  name: "headImg",
  props: {
    name: {
      type: String,
      default: ""
    },
    text: {
      type: String,
      default: ""
    }
  },
  setup() {
    const image = ref<string[]>([
      require("@/assets/img/1.jpg"),
      require("@/assets/img/2.jpg"),
      require("@/assets/img/3.png"),
      require("@/assets/img/4.jpg"),
      require("@/assets/img/5.jpg"),
      require("@/assets/img/6.jpg"),
      require("@/assets/img/7.jpg"),
      require("@/assets/img/8.jpg"),
      require("@/assets/img/9.jpg"),
      require("@/assets/img/10.png"),
      require("@/assets/img/11.jpg"),
      require("@/assets/img/12.jpg"),
      require("@/assets/img/13.jpg"),
      require("@/assets/img/14.jpg"),
      require("@/assets/img/15.jpg")
    ]);
    const index = Math.floor(Math.random() * 15 + 1);
    const back = `background: rgba(0, 0, 0, 0.3) url(${
      image.value[index - 1]
    }) no-repeat; background-position: 50% 50%;background-size: cover;`;

    return {
      back
    };
  }
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  &-center {
    font-family: Regular, cursive;
    h1 {
      font-size: 3.5rem;
      font-weight: bold;
      background-image: -webkit-linear-gradient(
        bottom,
        #ff6a88,
        #f7ce68,
        #2b86c5
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    p {
      font-size: 1.5rem;
      font-weight: bold;
      background-image: -webkit-linear-gradient(
        bottom,
        #74ebd5,
        #fbda61,
        #97d9e1
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
